<style scoped lang="scss">
.creation-con{
  display: flex;
  flex-direction: column;

  & > view{
    &:nth-child(1){}
    &:nth-child(2){
      flex: 1;
      margin-top: 20rpx;
      overflow: hidden;
    }
  }
}

.role-list{
  display: flex;
  flex-wrap: wrap;
  padding-left: 20rpx;
  padding-right: 20rpx;

  & > view{
    width: 345rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    margin-right: 19rpx;
    display: flex;

    &:nth-child(2n){
      margin-right: 0;
    }

    & > view{
      &:nth-child(1){
        width: 88rpx;
        height: 88rpx;

        image{
          width: 88rpx;
          height: 88rpx;
          border-radius: 6rpx;
        }
      }
      &:nth-child(2){
        margin-left: 20rpx;
        flex: 1;
        overflow: hidden;
        & > view{
          &:nth-child(1){
            @include textOverflow();

            font-size: 28rpx;
            width: 100%;
            margin-top: 5rpx;
            height: 40rpx;
            line-height: 40rpx;
            color: #101012;
            margin-bottom: 10rpx;
          }
          &:nth-child(2){
            display: flex;
            & > view{
              font-size: 24rpx;
              color: #878788;
              margin-right: 20rpx;
              display: flex;
              align-items: center;

              text{
                font-size: 26rpx;
                margin-right: 8rpx;
              }

              &:last-child{
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}

</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head>
        角色模拟
      </h-head>
    </view>

    <view class="s-body creation-con">
      <view>
        <u-tabs :list="cateList" :current="current" @change="change"></u-tabs>
      </view>
      <view>
        <scroll-view class="maxh" :scroll-y="true">
          <view class="role-list">
            <view v-for="x in list" :key="x.id" @click="gotoItem(x)">
              <view>
                <image mode="aspectFill" v-if="x.avatar" :src="x.avatar" alt="" />
                <image mode="aspectFill" v-else src="../../static/images/ai-icon.png" alt="" />
              </view>
              <view>
                <view>{{ x.name }}</view>
                <view>
                  <view>
                    <text class="iconfont icon-liulan"></text>{{ x.fakeClickNum + x.clickNum}}
                  </view>
                  <view>
                    <text class="iconfont icon-pinglun1"></text>{{x.fakeUseNum + x.useNum}}
                  </view>
                </view>
              </view>
            </view>
          </view>

        </scroll-view>
      </view>
    </view>

    <view class="s-footer">
      <h-footer active="3"></h-footer>
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },
  onShow() {

  },
  onLoad(option) {
    this.initCateList()
  },
  onHide() {
  },
  onUnload() {
  },
  data() {
    return {
      cateList: [],
      list: [],
      current: 0
    };
  },
  methods: {
    gotoItem(d) {
      this.storage.setQaConfig(d)
      this.utils.gotoPage('/pages/chat/index?type=2&id=' + d.id)
    },
    changeItem(d) {
      this.activeInfo = d
    },
    initCateList() {
      this.httpClient.post({
        url: this.APIPath.identity.getChildList,
        data: {}
      }).then(res => {
        const arr = [];

        (res.data || []).forEach(v => {
          if(v.children && v.children.length > 0) {
            arr.push(v)
          }
        })

        if(arr.length > 0) {
          this.changeItem(arr[0].children[0])
        }
        this.cateList = arr
        this.change(0)
      }, err => {
      })
    },

    change(index) {
      this.current = index;
      this.list = this.cateList[index].children
      this.changeItem(this.cateList[index])
    }
  },
};
</script>

